<template>
	<view>
		<u-sticky>
			<view class="tabs">
				<view class="title1">
					<view>
						城市合伙人收益比例为
					</view>
					<view>
						{{model.pt_service}}%
					</view>
				</view>
				<view class="title2">
					各项返佣比例之和不要超过城市合伙人的比例，为0不返佣
				</view>
			</view>
		</u-sticky>
		<view class="content">
			<view class="list">
				<view class="title">
					默认价格
					<u-input type="digit" inputAlign="right" v-model="model.price" border="none" placeholder="请输入"></u-input>
					<span class="unit">元/小时</span>
				</view>
			</view>
			<view class="list">
				<view class="title">
					最低价格
					<u-input type="digit" inputAlign="right" v-model="model.low" border="none" placeholder="请输入"></u-input>
					<span class="unit">元/小时</span>
				</view>
				<u-line></u-line>
				<view class="con1">
					平台建议最低：{{model.pt_low}} 元/小时
				</view>
			</view>
			<view class="text">
				* 未设置最低价格，将按平台最低价格进行
			</view>
			<view class="list">
				<view class="title">
					起订时间
					<u-input type="digit" inputAlign="right" v-model="model.starting" border="none" placeholder="请输入"></u-input>
					<span class="unit">小时</span>
				</view>
			</view>
			<view class="list">
				<view class="title">
					达人获得佣金
					<u-input type="digit" inputAlign="right" v-model="model.commission1" border="none" placeholder="请输入"></u-input>
					<span class="unit">%</span>
				</view>
				<view class="con2" @click="goPage('grade')">
					按等级设置 <u-icon name="arrow-right" size="14" color="#FF7681"></u-icon>
				</view>
				<u-line></u-line>
				<view class="title">
					达人上线佣金
					<u-input type="digit" inputAlign="right" v-model="model.commission2" border="none" placeholder="请输入"></u-input>
					<span class="unit">%</span>
				</view> <u-line></u-line>
				<view class="title">
					用户上线佣金
					<u-input type="digit" inputAlign="right" v-model="model.commission3" border="none" placeholder="请输入"></u-input>
					<span class="unit">%</span>
				</view> <u-line></u-line>
				<view class="title">
					取消扣费
					<u-input type="digit" inputAlign="right" v-model="model.withhold" border="none" placeholder="请输入"></u-input>
					<span class="unit">%</span>
				</view>
			</view>
			<view class="text">
				* 已出发、已到达状态下，取消订单将扣除服务费x%的费用
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @click="save">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					price: '',
					low: '',
					starting: '',
					commission1: '',
					commission2: '',
					commission3: '',
					withhold: '',
					commissionlevel:{}
				},
				city_id:null,
				id:null
			};
		},
		onLoad(options) {
			this.id = options.id
			this.city_id = options.city_id
			this.getDetail()
		},
		methods: {
			getDetail(){
				this.rq.getData('Service_Area/index',{id:this.id,city_id:this.city_id}).then(res=>{
					this.model = res.data
				})
			},
			goPage(url) {
				if(!this.model.commission1){
					uni.showToast({
						title:'请设置达人佣金比例~',
						icon:'none'
					})
					return
				}
				setTimeout(()=>{
					uni.$emit('model',this.model.commissionlevel)
				},800)
				uni.navigateTo({
					url: `/subpages/proxyManage/grade?percent=${this.model.commission1}`
				})
			},
			receiveGrade(data) {
				this.model.commissionlevel = data
			},
			save() {
				if(this.model.price*1<=0){
					uni.showToast({
						title:'请设置默认价格~',
						icon:'none'
					})
					return
				}
				this.rq.getData('Service_Area/save',this.model).then(res=>{
					uni.showToast({
						title:'保存成功~',
						icon:'none',
						success() {
							setTimeout(()=>{
								uni.navigateBack()
							},500)
						}
					})					
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		margin-top: 20rpx;
		width: 100%;
		padding-bottom: 120rpx;

		.text {
			font-family: PingFang SC;
			font-size: 12px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;
			color: #FF7681;
			margin: 20rpx 40rpx;
		}

		.list {
			width: 94%;
			margin: 20rpx auto;
			border-radius: 8px;
			opacity: 1;
			background: #FFFFFF;

			.title {
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 15px;
				letter-spacing: 0px;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;

				.unit {
					margin-left: 20rpx;
				}
			}

			.con1 {
				font-family: PingFang SC;
				font-size: 12px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0px;
				color: #999999;
				text-align: end;
				padding: 30rpx;
			}

			.con2 {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-family: PingFang SC;
				font-size: 12px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0px;
				color: #FF7681;
				padding: 30rpx;
			}
		}
	}

	.tabs {
		width: 100%;
		height: 116rpx;
		background: #FEF4F5;
		padding: 20rpx 0;

		.title1 {
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 28px;
			text-align: center;
			letter-spacing: 0px;
			color: #FF7681;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
		}

		.title2 {
			font-family: PingFang SC;
			font-size: 10px;
			font-weight: normal;
			line-height: 28px;
			letter-spacing: 0px;
			color: #FF7681;
			padding: 0 20rpx;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 59px;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
		z-index: 3;

		.btn {
			margin: 20rpx auto;
			width: 335px;
			height: 74rpx;
			border-radius: 102px;
			opacity: 1;

			background: #FF5866;

			border: 1px solid #FF5866;
			font-family: PingFang SC;
			font-size: 15px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;

			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 10rpx;
		}
	}
</style>